<template>
  <el-drawer v-bind="$attrs" v-on="$listeners" append-to-body :size="getWidth">
    <div class="beetles-drawer-wrapper" ref="wrapper">
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "beetles-drawer",
  props: {
    autoSize: {
      type: Boolean,
      required: false,
      default: true
    },
  },
  data() {
    return {
    }
  },
  methods: {
    getWidth() {
      let size = null;
      if (this.autoSize) {
        size = this.$refs.wrapper.offsetWidth < document.body.clientWidth ? this.$refs.wrapper.offsetWidth : "100%";
      } else {
        size = this.size
      }
      return size;
    },
  },
  mounted() {
  },
  computed: {
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-drawer {
  outline: none;

  &__header {
    margin-bottom: 20px;
  }

  &__body {
    height: 100%;
    overflow: hidden;
  }
}

.beetles-drawer-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;

  main {
    //flex: 1;
    overflow: scroll;
  }

  footer {
    padding: 10px 10px;
    flex: none;
  }
}
</style>
